import React, { useState } from 'react';
import { useNavigate } from 'react-router-dom';

type Role = '学生' | '白领' | '自由职业' | '自定义';

function App() {
  const navigate = useNavigate();
  const [characterName, setCharacterName] = useState('');
  const [selectedRole, setSelectedRole] = useState<Role | null>(null);

  const roles: { type: Role; color: string }[] = [
    { type: '学生', color: 'bg-pink-300' },
    { type: '白领', color: 'bg-blue-300' },
    { type: '自由职业', color: 'bg-green-300' },
    { type: '自定义', color: 'bg-purple-300' }
  ];

  const handleStart = () => {
    if (!characterName || !selectedRole) {
      alert('请填写角色名称并选择职业身份');
      return;
    }
    // Navigate to Question1 page
    navigate('/question1');
  };

  return (
    <div className="min-h-screen bg-gradient-to-br from-pink-50 to-purple-50 flex items-center justify-center p-4">
      <div className="bg-white rounded-3xl shadow-xl p-8 w-full max-w-md">
        <h1 className="text-2xl font-bold text-center mb-2">创建你的角色</h1>
        <p className="text-gray-500 text-center mb-8">开启你的都市公寓生活</p>

        <div className="space-y-6">
          <div>
            <h2 className="text-lg font-semibold mb-2">给自己起个名字</h2>
            <p className="text-gray-500 text-sm mb-3">这将是其他住户认识你的方式</p>
            <input
              type="text"
              placeholder="输入你的角色名称"
              value={characterName}
              onChange={(e) => setCharacterName(e.target.value)}
              className="w-full px-4 py-3 rounded-xl bg-gray-50 border border-gray-200 focus:outline-none focus:ring-2 focus:ring-pink-300 transition-all"
            />
          </div>

          <div>
            <h2 className="text-lg font-semibold mb-2">选择你的职业身份</h2>
            <p className="text-gray-500 text-sm mb-3">让我们了解你的日常生活</p>
            <div className="grid grid-cols-2 gap-4">
              {roles.map(({ type, color }) => (
                <button
                  key={type}
                  onClick={() => setSelectedRole(type)}
                  className={`p-6 rounded-xl flex flex-col items-center justify-center transition-all ${
                    selectedRole === type
                      ? `${color} shadow-lg scale-105`
                      : 'bg-gray-50 hover:bg-gray-100'
                  }`}
                >
                  <div className={`w-12 h-12 rounded-full ${color} mb-2`}></div>
                  <span className="font-medium">{type}</span>
                </button>
              ))}
            </div>
          </div>

          <button
            onClick={handleStart}
            className="w-full py-4 bg-pink-400 hover:bg-pink-500 text-white rounded-full font-semibold transition-all transform hover:scale-105 focus:outline-none focus:ring-2 focus:ring-pink-300"
          >
            开启公寓生活
          </button>
        </div>
      </div>
    </div>
  );
}

export default App;